<template>
  <div class="pc-box">
    <div class="pc-left">
    		<div>
    			<span></span>
    			个人中心
    		</div>
    		<ul>
            <li><h3>交易管理<i class="icon"></i></h3></li>
            <li ><router-link to="/center"><span class="pc-change">我的账户</span></router-link></li>
           	<li ><router-link to="/indent"><span class="pc-change">我的订单</span></router-link></li>
            <li ><router-link to="/integral"><span @click="change()" :class="{'pc-change':isA,'pc-change1':!isA}">我的积分</span></router-link></li>
            <li ><router-link to="/coupon"><span class="pc-change">我的易和劵</span></router-link></li>
            <li><h3>会员资料<i class="icon"></i></h3></li>
           <li ><router-link to="/material"><span class="pc-change">个人资料</span></router-link></li>
           <li ><router-link to="/center"><span class="pc-change">地址管理</span></router-link></li>
           <li ><router-link to="/center"><span class="pc-change">我的收藏</span></router-link></li>
           <li ><router-link to="/center"><span class="pc-change">最近浏览</span></router-link></li>
           <li ><router-link to="/center"><span class="pc-change"> 修改密码</span></router-link></li>
           <li><h3>站内信<i class="icon"></i></h3></li>
           <li ><router-link to="/center"><span class="pc-change">我的消息</span></router-link></li>
    		</ul>
    </div>
    <div class="pc-right">
    		<div class="pc-mark">
    			<router-link to="/integral"><span class="pc-myine">我的积分</span></router-link>
    				|
    			<router-link to="/convert"><span class="pc-con">兑换记录</span></router-link>
    		</div>
    		<div class="pc-address">
    			<span>累积积分: <span>8120分</span></span>
    			<span>当前积分: <span>240分</span></span>
    		</div>
    		<div class="pc-lists">
    			<table border="" cellspacing="" cellpadding="">
    				<tr>
    					<th>积分日期</th>
    					<th>积分</th>
    					<th>兑换商品</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>毛巾</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>毛巾</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>毛巾</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>手机</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>手机</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>手机</th>
    				</tr>
    				<tr>
    					<th>2015-06-06 16:20:99</th>
    					<th>+800</th>
    					<th>毛巾</th>
    				</tr>
    			</table>
    		</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isA: false
    }
  },
  methods:{
  	change:function(){
  		console.log(this)
//		this.toggleClass("pc-change")
		this.isA=!this.isA
  	}
}
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.pc-right{
		margin: 0 0 0 195px;
	    min-height: 599px;
	    background: #fff;
	    border: 1px solid #d3d3d3;
	}
	.pc-mark{
		padding: 20px 15px;
	    font-size: 16px;
	    color: #018DE2;
	    border-bottom: 1px solid #d3d3d3;
	}
	
	.pc-myine{
		font-size: 16px;
	    color: black;
		
	}
	.pc-con{
		font-size: 16px;
	   
		 color: #018DE2;
	}
	.pc-address{
		overflow: hidden;
    		margin: 15px;
    		font-size: 16px;
    		color: black;
	}
	.pc-address>span:nth-child(2){
		margin-left: 150px;
	}
	.pc-address>span>span{
		color:rgb(229,84,19)
	}
	.pc-lists{
		padding: 20px 15px;
		/*border: 1px solid #d3d3d3;*/
    		border-bottom: 0;
	}
	table{
		 width: 100%;
		 border: none;
	}
	table>tr:nth-child(1)>th{
		font-size: 14px;
	    height: 40px;
	    line-height: 40px;
	    background: #eaeaea;
	    color: #333;
	    font-weight: normal;
	    /*border: none;*/
	}
	table th{
		font-size: 14px;
	    height: 40px;
	    line-height: 40px;
	    /*background: #eaeaea;*/
	    color: #333;
	    font-weight: normal;
	    /*border: none;*/
	}
</style>